<template>
  <div class="container">
    <transition name="slide">
      <router-view></router-view>
    </transition>
    <footer class="footer" v-if ="!$route.meta.hidden">
      <ul>
        <router-link to="/home" tag="li">首页</router-link>
        <router-link to="/kind" tag="li">分类</router-link>
        <router-link to="/cart" tag="li">购物车</router-link>
        <router-link to="/user" tag="li">我的</router-link>
        <router-link to="/about" tag="li">关于</router-link>
      </ul>
    </footer>
  </div>
</template>

<style lang="stylus">
*
  padding 0
  margin 0
  list-style none
html, body, .container
  width 100%
  height 100%

.container
  display flex
  flex-direction column
  .box
    flex 1
    display flex
    flex-direction column
    overflow auto
    .header
      height 44px
      background-color #ff6666
    .content
      flex 1
      overflow auto
  .footer
    height 50px
    background-color #efefef
    ul
      display flex
      li
        flex 1
img
  width 100%

.slide-enter
  transform translateX(100%)
.slide-enter-to
  transform translateX(0)
.slide-enter-active
  transition all 5s
.slide-leave
  transform translateX(0)
.slide-leave-to
  transform translateX(-100%)
.slide-leave-active
  transition all 0s
</style>
